<template>
	<view class="content">
		<u-datetime-picker 
			:show="showStart" 
			v-model="timeStamp" 
			closeOnClickOverlay mode="date"
			@confirm="confirmStart" 
			@cancel="showStart = false" 
			@close="showStart = false">
		</u-datetime-picker>
		<view class="section-0">
			<view class="section-body">
				<view class="frequency">
					<view class="label">召开时间</view>
					<view class="time">
						<view class="input" @click="showDate('end_time')">{{form.end_time}}</view>
						<view class="iconfont icon-rili"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-1">
			<view class="section-body">
				<view class="title">参会项目</view>
				<view class="list">
					<view class="item" @click="handleSelectAll()">
						<view :class="`check ${(selectList.length === projectList.length) && selectList.length ? 'check__on': ''}`">
							<view class="iconfont icon-duigou"></view>
						</view>		
						<div class="name">全选</div>				
					</view>	
					<view class="item" @click="handleSelect(item)" v-for="item in projectList" :key="item.id">
						<view :class="`check ${selectList.findIndex(e => e.id === item.id) !== -1 ? 'check__on': ''}`">
							<view class="iconfont icon-duigou"></view>
						</view>
						<div class="name">{{item.project_name}}</div>						
					</view>	
				</view>
				<view class="custom-button" @click="goBack()">提交召开</view>
			</view>
		</view>
		<u-datetime-picker :show="showStart" v-model="startStamp" closeOnClickOverlay mode="date"
			@confirm="confirmStart" @cancel="showStart = false" @close="showStart = false"></u-datetime-picker>
	</view>
</template>

<script>
	import { projectSelectListApi } from '@/api/project.js'
	import { committeeListApi } from '@/api/statistics.js';
	import { mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			return {
				form: {
					end_time: '',
				},
				showStart: false,
				timeType: '',
				timeStamp: '',
				selectList: [],
				projectList: [],
				startStamp: 0,
				showStart: false,
				timeType: '',
			};
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
				userInfo: 'system/getUserInfo',
				curRole: 'system/getCurRole',
			})
		},
		methods:{
			goBack() {
				uni.navigateBack({
				    delta: 1
				});
			},
			showDate(type) {
				this.timeType = type;
				this.showStart = true;
			},
			closeDate(type) {
				this.timeType = '';
				this.showStart = false;
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate();
				const h = date.getHours() + ':';
				const m = date.getMinutes() + ':';
				const s = date.getSeconds();
				return Y + M + D;
			},
			confirmStart(val) {
				const timeStamp = val.value;
				this.form[this.timeType] = this.formatDate(timeStamp);
				this.closeDate();
			},
			handleSelect(item) {
				const idx = this.selectList.findIndex(e => e.id === item.id);
				if (idx !== -1) {
					this.selectList.splice(idx, 1);
				} else {
					this.selectList.push(item);
				}
			},
			handleSelectAll() {
				if (this.selectList.length !== this.projectList.length) {
					this.selectList = JSON.parse(JSON.stringify(this.projectList));
				} else {
					this.selectList = [];
				}
			},
			showDate(type) {
				this.timeType = type;
				this.showStart = true;
			},
			closeDate(type) {
				this.timeType = '';
				this.showStart = false;
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate();
				const h = date.getHours() + ':';
				const m = date.getMinutes() + ':';
				const s = date.getSeconds();
				return Y + M + D;
			},
			confirmStart(val) {
				const timeStamp = val.value;
				this.form[this.timeType] = this.formatDate(timeStamp);
				this.closeDate();
			},
			go(item) {
				const params = JSON.stringify(item);
				uni.navigateTo({
					url: '/pages/statistics/comprehensive/duty/meeting/list/index?params=' + params
				})
			},
			handleResetForm(){
				this.user_name = '';
				this.fetchData();
			},
			handleSearch(){
				this.fetchData();
			},
			// async fetchData() {
			// 	uni.showLoading({title: '加载中...'});
			// 	const { data } = await committeeListApi({...this.form});
			// 	uni.hideLoading();
			// 	if (data.code === 1) {
			// 		this.list = data.data.list;
			// 		this.total = data.data.total;
			// 	} 
			// },
			async fetchList() {
				let params = {};
				if (this.curRole === '项目经理') {
					params.link_user = this.userInfo.user_name;
				}
				const { data } = await projectSelectListApi(params);
				
				uni.showLoading({title: '加载中...'});
				
				if (data.code === 1) {
					this.projectList = data.data;
				}
				uni.hideLoading();
			},
		},
		onReady() {
			this.timeStamp = (new Date()).valueOf();
			this.form.end_time = this.formatDate(this.timeStamp)
			// this.fetchData();
			this.fetchList();
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #fff;
	}
	.check{
		box-sizing: border-box;
		border-radius: 50%;
		width: 42rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		background-color: #d8d8d5;
		.iconfont{
			font-size: 24rpx;
			color: #fff;
			display: none;
		}
	}
	.check__on{
		background-color: #2e5efe;
		.iconfont{
			display: block;
		}
	}
	
	.section-1{
		position: relative;
		top: -50rpx;
		z-index: 10;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.section-body{
			width: 100%;
			box-sizing: border-box;
			padding-left: 70rpx;
			padding-right: 70rpx;
			.title{
				height: 50rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 50rpx;
				letter-spacing: 0rpx;
				color: #0535d6;
				padding-top: 30rpx;
			}
			.list{
				width: 100%;
				margin-bottom: 80rpx;
				.item{
					width: 100%;
					@include clear();
					border-bottom: solid 2rpx #e1e7f6;
					.check{
						float: left;
						margin-right: 20rpx;
						margin-top: 18rpx;
					}
					.name{
						width: calc(100% - 62rpx);
						float: left;
						padding-top: 24rpx;
						padding-bottom: 24rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 30rpx;
						letter-spacing: 2rpx;
						color: #3b3c40;
					}
				}
			}
		}
	}
	
	.section-0{
		width: 100%;
		background-color: #2e5efe;
		.section-body{
			width: 100%;
			height: 150rpx;
			padding-left: 70rpx;
			padding-right: 70rpx;
			padding-bottom: 50rpx;
			background-color: #1534ce;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			.frequency{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 26rpx;
				color: #87c6ff;
				@include clear();
				.label{
					width: 130rpx;
					display: inline-block;
					color: #fff;
					float: left;
				}
				.time{
					display: inline-block;
					float: left;
					width: calc(100% - 130rpx);
					height: 48rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					margin-top: 26rpx;
					position: relative;
					.iconfont{
						position: absolute;
						right: 25rpx;
						line-height: 48rpx;
						color: #1534ce;
						font-size: 28rpx;
						z-index: 10;
						top: 0;
					}
					.input{
						width: 100%;
						height: 100%;
						padding-left: 35rpx;
						box-sizing: border-box;
						font-size: 26rpx;
						line-height: 48rpx;
						letter-spacing: 0rpx;
						color: #0535d6;
					}
				}
			}
			.item{
				width: 33.33%;
				float: left;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				padding-top: 40rpx;
				height: 100rpx;
				position: relative;
				.shape{
					width: 4rpx;
					height: 84rpx;
					background-image: linear-gradient(rgba(#3658f2, 0.3) 0%, #3658f2 30%, #3658f2 70%, rgba(#3658f2, 0.3) 100%,);
					position: absolute;
					right: 0;
					top: 48rpx;
				}
				.top{
					width: 100%;
					text-align: center;
					font-size: 16rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #95c4fa;
				}
				.bottom{
					width: 100%;
					text-align: center;
					font-size: 58rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #ffde00;
				}
			}
		}
	}
</style>
